import React, { Component } from 'react'
import { connect } from 'react-redux'
import { Link,hashHistory } from 'react-router'
import { Button, Spin, Form, Input, Table, Card, Col, Row,Select,Modal} from 'antd'
import '../../style/home.less'
import AdsetEdit from './adsetEdit'
import {adList,adBase} from 'actions/moduleManage'
import '../../style/userControl.less'
const FormItem = Form.Item
@Form.create({})
//abc
@connect(
  (state, props) => ({
    config: state.config,
    userInfoList: state.userInfoList,
  })
)
export default class app extends Component {
  constructor(props) {
    super(props)
    this.state = {
      list:"",
      contentType:"",
      visible:false
    }
    this.titleList={}
    this.keyword={"title":"","module":"",};//搜索关键词
    this.currentNumber = 1;//当前页面
    this.pagesize = 10;//每页条数
  }
  componentDidMount() {//页面首次加载
    this.selectList();
  }
  searchFN(){//点击搜索按钮
    this.keyword = {"title":this.props.form.getFieldValue('title'),"module":this.props.form.getFieldValue('module')};
    this.currentNumber=1;
    this.selectList();
  }
  selectList(pageNumber){//查询列表
    const datajson = Object.assign({"start":pageNumber||1,"end":this.pagesize}, this.keyword);
    this.currentNumber = pageNumber||1;
    this.props.dispatch(adList(
      datajson,
      (respose) => {
        this.setState({
          list: respose,
        })
    }))
  }
  ShowSortFN(contentType){//点击排序按钮
    this.setState({
        visible: true,
        contentType:contentType
    })
  }
  ShowEidtFN(contentType){
    hashHistory.push('/AdIndustryhome/' + contentType)
  }
  handleCancel(){//关闭排序窗口
    this.setState({
        visible: false,
    })
  }
  columns() {//表格标题
    return [
      {
        title: '编号',
        key: 'contentType',
        dataIndex: 'contentType',
        width: '10%',
      },

      {
        title: '广告位标题',
        dataIndex: 'name',
        key: 'name',
        width: '10%',
      },
      {
        title: '广告位所属模块',
        dataIndex: 'module',
        key: 'module',
        width: '10%',
      },
      {
        title: '广告位封面',
        dataIndex: 'imgUrl',
        key: 'imgUrl',
        width: '10%',
        render: (text, recordId, index) => <img style={{width:"80px"}} src={text}/>,
      },
      {
        title: '操作',
        // key: 'id',
        // fixed: 'right',
        width: '10%',
        render: (text, recordId, index) => 
        <div>
          <Button type="primary" size="small" onClick={this.ShowSortFN.bind(this,text.contentType)} style={{marginRight:"5px",marginBottom:"5px"}}>排序</Button>          
          <Button type="primary" size="small" onClick={this.ShowEidtFN.bind(this,text.contentType)} style={{marginRight:"5px",marginBottom:"5px"}}>编辑</Button>       
        </div>,
      },
    ]
  }
  render () {
    
    const titleList = this.state.list?this.state.list.tileTotle:[]
    const ADlist = this.state.list?this.state.list.advertisement:[]
    const respData = this.state.list.respData ? this.state.list.respData : [];//刷新页面调用接口数据赋值
    const { form } = this.props;
    const { getFieldDecorator } = form
    return (
      <div className="page">
      
      <div className="searcDiv">
        <Form onSubmit={this.searchFN.bind(this)} layout="inline">
            <FormItem label="广告位标题">
                {
                getFieldDecorator('title', {
                    rules: [{
                    required: false,
                    }],
                })(
                    <Input placeholder="请输入广告位标题" size="default" style={{ width: '200px' }} />
                )
                }
            </FormItem>
            <FormItem label="广告位所属模块">
                {
                getFieldDecorator('module', {
                    rules: [{
                    required: false,
                    }],
                })(
                    <Input placeholder="请输入广告位所属模块" size="default" style={{ width: '200px' }} />
                )
                }
            </FormItem>
            <Button type="primary" onClick={this.searchFN.bind(this)}>搜索</Button>
        </Form>
        </div>
          {/* 广告位设置 */}
          {/*数据渲染列表*/}
            <Spin spinning={false}>
            <Table
              rowKey="id" 
              columns={this.columns()}//表格标题列
              dataSource={respData.resultData}
              pagination={{ total: respData.count, current:this.currentNumber,pageSize: this.pagesize,  onChange: this.selectList.bind(this)}}
              scroll={{ y: true }}
            />
          </Spin>
          {this.state.visible?
            <Modal
                    title={"排序"}
                    visible={this.state.visible}
                    width={"80%"}
                    footer={null}
                    onCancel={this.handleCancel.bind(this)}
                >
                <AdsetEdit contentType={this.state.contentType}/>
          </Modal>
          :''}

      </div>
      )
  }
}

